<template>
	<div class="invoice-detail bg-f5">
		<header class="header bg-white">
			<ul class="layout container pt15 pb15"> 
				<li class="radius border pt5 pb5 pl5 pr5 fs10 c333" :class="{ active : active == item.type }" v-for='item in title_data' @click="active = item.type ">{{ item.name }}</li>				
			</ul>
		</header>
		<section class="content">
			<h3 class="c333 fs14 pt15 pb15 container">开票信息</h3>
			<template v-if="active == 1">
				<ul class='bg-white'>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">姓名</label>
						<input type="text" placeholder="请填写您的姓名" v-model="params1.company_name">
					</li>
					<li class="container pt15 pb15 flex">
						<label class='fs14 c4a' for="">手机号码</label>
						<input type="number" placeholder="请填写您的手机号码" v-model="params1.phone">
					</li>
				</ul>
			</template>
			<template v-if="active == 2">
				<ul class='bg-white'>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">单位名称</label>
						<input type="text" placeholder="请填写单位名称" v-model="params2.company_name">
					</li>
					<li class="container pt15 pb15 flex">
						<label class='fs14 c4a' for="">纳税人识别号</label>
						<input type="text" placeholder="请输入纳税人识别号" v-model="params2.tax_no">
					</li>
				</ul>
			</template>
			<template v-if="active == 3">
				<ul class='bg-white'>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">单位名称</label>
						<input type="text" placeholder="请填写单位名称" v-model="params3.company_name">
					</li>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">纳税人识别号</label>
						<input type="text" placeholder="请输入纳税人识别号" v-model="params3.tax_no">
					</li>
					<li class="container pt15 pb15 flex">
						<label class='fs14 c4a' for="">手机号</label>
						<input type="number" placeholder="请输入接收发票的手机" v-model="params3.phone">
					</li>
				</ul>
			</template>
			<template v-if="active == 4">
				<ul class='bg-white'>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">单位名称</label>
						<input type="text" placeholder="请填写单位名称" v-model="params4.company_name">
					</li>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">纳税人识别号</label>
						<input type="text" placeholder="请输入纳税人识别号" v-model="params4.tax_no">
					</li>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">注册地址</label>
						<input type="text" placeholder="请填写注册地址" v-model="params4.reg_address">
					</li>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">注册电话</label>
						<input type="number" placeholder="请输入注册电话号码" v-model="params4.reg_phone">
					</li>
					<li class="container pt15 pb15 flex border-b">
						<label class='fs14 c4a' for="">开户银行</label>
						<input type="text" placeholder="请填写开户银行名称" v-model="params4.bank">
					</li>
					<li class="container pt15 pb15 flex">
						<label class='fs14 c4a' for="">银行账号</label>
						<input type="text" placeholder="请输入银行账号" v-model="params4.bank_account">
					</li>
				</ul>
			</template>

		</section>
		<button class="white bg-subject radius align-center block auto w60 pt10 pb10 pos-abs bottom20 pos-center" v-if="scrollTop < 400" @click="submit">确认</button>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	export default{
		components:{
			Toast
		},
		data()
		{
			return{
				scrollTop     : '',
				active     : this.$route.query.type ? this.$route.query.type : '1',
				title_data : [
					{ name: '个人发票',type : 1 },
					{ name: '普通发票',type : 2 },
					{ name: '电子普通发票',type : 3 },
					{ name: '增值税专用发票',type : 4 },
				],
				params1 : {
					company_name : '',
					phone 		 : '',
					id 			 : this.$route.query.id ? this.$route.query.id : '',
				},
				params2 : {
					company_name : '',
					tax_no 		 : '',
					id 			 : this.$route.query.id ? this.$route.query.id : '',
				},
				params3 : {
					company_name : '',
					tax_no 		 : '',
					phone		 : '', 
					id 			 : this.$route.query.id ? this.$route.query.id : '',
				},
				params4 : {
					company_name : '',
					phone 		 : '',
					tax_no		 : '',
					reg_address	 : '',
					reg_phone	 : '',
					bank		 : '',
					bank_account : '',
					id 			 : this.$route.query.id ? this.$route.query.id : '',
				}
			}
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll);
		},
		created()
		{
			this.loadData();
		},
		methods:
		{

			handleScroll ()	 
			{
			  this.scrollTop = window.innerHeight
			},
			loadData()
			{
				if(this.$route.query.type)
				{
					switch(this.active)
					{
						case '1' : 
							this.params1 = this.$store.state.edit_invoice;
							break;
						case '2': 
							this.params2 = this.$store.state.edit_invoice;
							console.log(this.params2)
							break;
						case '3' : 
							this.params3 = this.$store.state.edit_invoice;
							break;
						case '4': 
							this.params4 = this.$store.state.edit_invoice;
							break;
					}
				}
			},
			submit()
			{
				let params;
				switch(this.active)
				{
					case '1' : 
						params = this.params1;
						break;
					case '2' : 
						params = this.params2;
						break;
					case '3' : 
						params = this.params3;
						break;
					case '4' : 
						params = this.params4;
						break;
				}
				this.$http.post('/setting/invoice',params).then( res => {
					// Toast('修改成功')
					this.$router.replace('/personal/invoice')
				})
			}
		}
	}
</script>

<style lang="less">
	html{
		height: 100%;
	}
	.invoice-detail{
		.content{
			label{
				width: 6rem;
			}
		}
		.active{
			border-color:#ea2000;
			color:#ea2000;
		}
	}
</style>